<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>10.2状态提升重构</title>
</head>

<body>
  <div id="root"></div>

  <!-- 加载 React。-->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    // 通常，多个组件需要反映相同的变化数据，
    // 这时我们建议将共享状态提升到最近的共同父组件中去。
    // 让我们看看它是如何运作的。


    // 测温组件
    function BoilingVerdict(props) {
      if (props.celsius >= 100) { return <p>The water would boil.</p> }
      return <p>The water would not boil.</p>
    }

    const scaleNames = { c: 'Celsius', f: 'Fahrenhit' }

    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.state = ({ temperature: '' });

        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e) { this.setState({ temperature: e.target.value }); }

      render() {
        const temperature = this.state.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}</legend>
            <input value={temperature} onChange={this.handleChange} />
          </fieldset>
        );
      }
    }


    class Calculator extends React.Component {
      render() {
        return (
          <div>
            <TemperatureInput scale="c" />
            <TemperatureInput scale="f" />
          </div>
        )
      }
    }



    const root = document.getElementById('root');

    ReactDOM.render(<Calculator />, root);


  </script>
</body>

</html>